<template>
  <div class="teacher-container">
    <van-nav-bar title="教师管理" left-arrow @click-left="$router.back()" />
    
    <div class="teacher-content">
      <!-- 搜索栏 -->
      <van-search 
        v-model="searchValue" 
        placeholder="搜索教师姓名"
        @search="onSearch"
        @clear="onClear"
      />
      
      <!-- 添加按钮 -->
      <van-button 
        type="primary" 
        block 
        class="add-btn"
        @click="showAddDialog = true"
      >
        <van-icon name="plus" /> 添加教师
      </van-button>
      
      <!-- 教师列表 -->
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-card
          v-for="item in teacherList"
          :key="item.id"
          :title="item.name"
          :desc="`工号: ${item.employeeId} | 院系: ${item.department} | 职称: ${item.title}`"
          :thumb="item.avatar"
        >
          <template #tags>
            <van-tag type="primary">{{ item.status === 'active' ? '在职' : '离职' }}</van-tag>
            <van-tag type="success">{{ item.type === 'fulltime' ? '全职' : '兼职' }}</van-tag>
          </template>
          <template #footer>
            <van-button size="mini" @click="viewTeacher(item)">详情</van-button>
            <van-button size="mini" @click="editTeacher(item)">编辑</van-button>
            <van-button size="mini" type="danger" @click="deleteTeacher(item)">删除</van-button>
          </template>
        </van-card>
      </van-list>
    </div>
    
    <!-- 添加/编辑弹窗 -->
    <van-popup 
      v-model:show="showAddDialog" 
      position="bottom" 
      :style="{ height: '80%' }"
      round
      closeable
    >
      <div class="form-container">
        <h3>{{ editingTeacher ? '编辑教师' : '添加教师' }}</h3>
        <van-form @submit="onSubmit">
          <van-field
            v-model="formData.name"
            name="name"
            label="姓名"
            placeholder="请输入教师姓名"
            :rules="[{ required: true, message: '请输入教师姓名' }]"
          />
          <van-field
            v-model="formData.employeeId"
            name="employeeId"
            label="工号"
            placeholder="请输入工号"
            :rules="[{ required: true, message: '请输入工号' }]"
          />
          <van-field
            v-model="formData.department"
            name="department"
            label="院系"
            placeholder="请输入院系"
            :rules="[{ required: true, message: '请输入院系' }]"
          />
          <van-field
            v-model="formData.title"
            name="title"
            label="职称"
            placeholder="请输入职称"
            :rules="[{ required: true, message: '请输入职称' }]"
          />
          <van-field
            v-model="formData.phone"
            name="phone"
            label="联系电话"
            placeholder="请输入联系电话"
            :rules="[{ required: true, message: '请输入联系电话' }]"
          />
          <van-field
            v-model="formData.email"
            name="email"
            label="邮箱"
            type="email"
            placeholder="请输入邮箱"
            :rules="[{ required: true, message: '请输入邮箱' }]"
          />
          <van-field name="type" label="聘用类型">
            <template #input>
              <van-radio-group v-model="formData.type" direction="horizontal">
                <van-radio name="fulltime">全职</van-radio>
                <van-radio name="parttime">兼职</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field name="status" label="状态">
            <template #input>
              <van-radio-group v-model="formData.status" direction="horizontal">
                <van-radio name="active">在职</van-radio>
                <van-radio name="inactive">离职</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-model="formData.specialties"
            name="specialties"
            label="专业领域"
            type="textarea"
            placeholder="请输入专业领域（多个用逗号分隔）"
            rows="2"
          />
          <div class="form-buttons">
            <van-button block type="primary" native-type="submit">
              {{ editingTeacher ? '更新' : '添加' }}
            </van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
    
    <!-- 详情弹窗 -->
    <van-popup 
      v-model:show="showDetailDialog" 
      position="bottom" 
      :style="{ height: '60%' }"
      round
      closeable
    >
      <div class="detail-container" v-if="selectedTeacher">
        <h3>教师详情</h3>
        <van-cell-group>
          <van-cell title="姓名" :value="selectedTeacher.name" />
          <van-cell title="工号" :value="selectedTeacher.employeeId" />
          <van-cell title="院系" :value="selectedTeacher.department" />
          <van-cell title="职称" :value="selectedTeacher.title" />
          <van-cell title="联系电话" :value="selectedTeacher.phone" />
          <van-cell title="邮箱" :value="selectedTeacher.email" />
          <van-cell title="聘用类型" :value="selectedTeacher.type === 'fulltime' ? '全职' : '兼职'" />
          <van-cell title="状态" :value="selectedTeacher.status === 'active' ? '在职' : '离职'" />
          <van-cell title="专业领域" :value="selectedTeacher.specialties" />
        </van-cell-group>
      </div>
    </van-popup>
    
    <van-tabbar v-model="activeTab" fixed>
      <van-tabbar-item icon="wap-home-o" to="/dashboard">首页</van-tabbar-item>
      <van-tabbar-item icon="calendar-o" to="/calendar">日历</van-tabbar-item>
      <van-tabbar-item icon="orders-o" to="/schedule">排课</van-tabbar-item>
      <van-tabbar-item icon="manager-o" to="/master/teacher">管理</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { showToast, showConfirmDialog } from 'vant'

const searchValue = ref('')
const loading = ref(false)
const finished = ref(false)
const teacherList = ref([])
const showAddDialog = ref(false)
const showDetailDialog = ref(false)
const editingTeacher = ref(null)
const selectedTeacher = ref(null)
const activeTab = ref(3)

const formData = ref({
  name: '',
  employeeId: '',
  department: '',
  title: '',
  phone: '',
  email: '',
  type: 'fulltime',
  status: 'active',
  specialties: ''
})

const onLoad = async () => {
  try {
    // 模拟加载数据
    setTimeout(() => {
      if (teacherList.value.length === 0) {
        teacherList.value = [
          { 
            id: 1, 
            name: '张教授', 
            employeeId: 'T001', 
            department: '计算机系', 
            title: '教授',
            phone: '13800138001',
            email: 'zhang@university.edu',
            type: 'fulltime',
            status: 'active',
            specialties: '数据结构,算法设计,人工智能',
            avatar: 'https://img.yzcdn.cn/vant/cat.jpeg'
          },
          { 
            id: 2, 
            name: '李副教授', 
            employeeId: 'T002', 
            department: '数学系', 
            title: '副教授',
            phone: '13800138002',
            email: 'li@university.edu',
            type: 'fulltime',
            status: 'active',
            specialties: '高等数学,线性代数,概率统计'
          },
          { 
            id: 3, 
            name: '王讲师', 
            employeeId: 'T003', 
            department: '物理系', 
            title: '讲师',
            phone: '13800138003',
            email: 'wang@university.edu',
            type: 'parttime',
            status: 'active',
            specialties: '大学物理,电磁学'
          }
        ]
      }
      loading.value = false
      finished.value = true
    }, 1000)
  } catch (error) {
    showToast('加载失败')
    loading.value = false
  }
}

const onSearch = (value) => {
  // 实现搜索逻辑
  console.log('搜索:', value)
}

const onClear = () => {
  searchValue.value = ''
}

const viewTeacher = (item) => {
  selectedTeacher.value = item
  showDetailDialog.value = true
}

const editTeacher = (item) => {
  editingTeacher.value = item
  formData.value = { ...item }
  showAddDialog.value = true
}

const deleteTeacher = async (item) => {
  try {
    await showConfirmDialog({
      title: '确认删除',
      message: `确定要删除教师"${item.name}"吗？`,
    })
    
    // 这里应该调用删除API
    const index = teacherList.value.findIndex(t => t.id === item.id)
    if (index > -1) {
      teacherList.value.splice(index, 1)
      showToast('删除成功')
    }
  } catch {
    // 用户取消
  }
}

const onSubmit = async () => {
  try {
    if (editingTeacher.value) {
      // 编辑
      const index = teacherList.value.findIndex(t => t.id === editingTeacher.value.id)
      if (index > -1) {
        teacherList.value[index] = { ...editingTeacher.value, ...formData.value }
      }
      showToast('更新成功')
    } else {
      // 添加
      const newTeacher = {
        id: Date.now(),
        ...formData.value
      }
      teacherList.value.unshift(newTeacher)
      showToast('添加成功')
    }
    
    showAddDialog.value = false
    resetForm()
  } catch (error) {
    showToast('操作失败')
  }
}

const resetForm = () => {
  formData.value = {
    name: '',
    employeeId: '',
    department: '',
    title: '',
    phone: '',
    email: '',
    type: 'fulltime',
    status: 'active',
    specialties: ''
  }
  editingTeacher.value = null
}

onMounted(() => {
  onLoad()
})
</script>

<style lang="scss" scoped>
.teacher-container {
  padding-bottom: 50px;
}

.teacher-content {
  padding: $padding-md;
}

.add-btn {
  margin: $padding-md 0;
  
  .van-icon {
    margin-right: 4px;
  }
}

.van-card {
  margin-bottom: $padding-sm;
  border-radius: $border-radius-md;
  overflow: hidden;
  
  :deep(.van-card__footer) {
    display: flex;
    gap: $padding-xs;
  }
  
  :deep(.van-card__header) {
    .van-tag {
      margin-right: $padding-xs;
    }
  }
}

.form-container, .detail-container {
  padding: $padding-lg;
  
  h3 {
    text-align: center;
    margin-bottom: $padding-lg;
    color: $text-color;
  }
}

.form-buttons {
  margin-top: $padding-lg;
}
</style>